<template>
	<div class="d-flex justify-content-around flex-wrap">
		<div class="card" style="width: 18rem; margin: 20px;">
			<img :src="imgPath + 'img0.jpg'" class="card-img-top">
			<div class="card-body">
				<h5 class="card-title text-wrap text-truncate" style="height: 48px;">深入理解计算机系统（原书第2版）</h5>
				<p class="card-text text-wrap text-truncate" style="height: 48px;">[美] Randal E. 著 , David R.O Hallaren
					著 , 龚奕利 译 , 雷迎春 译</p>
			</div>
			<ul class="list-group list-group-flush">
				<li class="list-group-item d-flex justify-content-between">
					<span class="user-select-none">分类:</span>
					<span style="width: 80%;" class="text-truncate">计算机与互联网</span>
				</li>
				<li class="list-group-item d-flex justify-content-between">
					<span class="user-select-none">库存:</span>
					<span style="width: 80%;" class="text-truncate">11</span>
				</li>
				<li class="list-group-item d-flex justify-content-between">
					<span class="user-select-none">ISBN:</span>
					<span style="width: 80%;" class="text-truncate">9787111321330</span>
				</li>
			</ul>
			<div class="card-body">
				<button type="button" class="btn btn-outline-info card-link">查看详情</button>
				<button type="button" class="btn btn-outline-primary card-link">借阅</button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	import axios from "axios";
	import store from "../store/index"

	import Head from "../components/Head";
	import Side from "../components/Side";

	export default {
		props: {
			//入口参数
		},
		components: {
			//引入组件
		},
		setup() {
			//实例化userouter
			const router = useRouter();
			//onMounted()生命周期
			onMounted(() => {
				
			});
			const data = reactive({
				books: [],
				imgPath: store.state.imageUrl
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>
